<template>
	<view>
		<view class="row-box open-box">
			<view style="width: 86%;">压价设置</view>
			<view>
				<u-switch v-model="switchOpen" @change="handleChange" :disabled="userInfo.type !== 2"></u-switch>
			</view>
		</view>
		
		<view style="margin: 20rpx;"  v-if="switchOpen">
			<view class="h2-font">压价比例</view>
			<view style="font-size: 26rpx;color: #fa3534;">
				顾客查看金额=最高成交价-压价
			</view>
			<view style="font-size: 26rpx;color: #fa3534;">
				压价部分根据公司配置，给予店员一定的提成奖励
			</view>
		</view>
		
		<view class="table-box"  v-if="switchOpen">
			<view class="line-box row-box">
				<view class="th-box" style="width: 40%;">最高成交价区间</view>
				<view class="th-box" style="width: 23%;">压价比例</view>
				<view class="th-box" style="width: 23%;">压价上限</view>
				<view class="th-box" style="width: 14%;border: none;">操作</view>
			</view>
			
			<view class="line-box row-box" v-for="(item, key) in list" :style="key === list.length - 1 ? 'border: none;':''">
				<view class="tr-box" style="width: 40%;">{{item.beginAmount + ' - ' + item.endAmount}}</view>
				<view class="tr-box" style="width: 23%;">{{item.rate}}</view>
				<view class="tr-box" style="width: 23%;">{{item.upperLimitAmount ? item.upperLimitAmount : ''}}</view>
				<view class="tr-box" style="width: 14%;border: none;" @click="handleUpdate(item)">
					<text style="color: #2979ff;text-decoration:underline;" v-if="userInfo.type === 2">编辑</text>
				</view>
			</view>
		</view>
		
		<view style="margin: 20rpx;" v-if="switchOpen && userInfo.type === 2">
			<u-button type="success" text="添加梯度" @click="handleAdd()"></u-button>
		</view>
		
		<u-popup 
			:show="popShow" 
			mode="bottom"
			 @close="popoupClose" 
			 closeable
		>
			<view class="pop-head-box row-box">
				<view v-show="form.id" style="color: #fa3534;" @click="handleDelete">删除此区间</view>
				<view class="h2-font">价格区间</view>
			</view>
			
			<view class="form-box">
				<u-form :model="form" label-width="auto">
					<u-form-item label="价格区间:" required>
						<view class="row-box">
							<view style="width: 40%;">
								<u--input v-model="form.beginAmount" type="number" :min="0"></u--input>
							</view>
							<view style="width: 10%;" class="center-box">
								~
							</view>
							<view style="width: 40%;">
								<u--input v-model="form.endAmount" type="number">></u--input>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="压价比例:" required>
						<view style="width: 40%;margin-left: 50%;" class="row-box">
							<u--input v-model="form.rate" type="number">></u--input>
							<view class="center-box">%</view>
						</view>
					</u-form-item>
					<u-form-item label="压价上限:">
						<view style="width: 40%;margin-left: 50%;">
							<u--input v-model="form.upperLimitAmount" type="number">></u--input>
						</view>
					</u-form-item>
				</u-form>
			</view>
			
			<view class="text-box">
				<view>顾客查看金额=最高成交价-压价</view>
				<view>压价=最高成交价*压价比例 和 压价上限的较小值</view>
			</view>
			
			<view style="margin: 20rpx;">
				<u-button type="success" text="确定" @click="submitForm"></u-button>
			</view>
		</u-popup>
		
		<u-modal 
			:show="modalShow" 
			title="警告" 
			:content="content"
			showCancelButton
			@close="modalClose"
			@cancel="modalClose"
			@confirm="modalConfirm"
		></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync(this.$constant.ROLE_INFO_KEY),
				modalShow: false,
				popShow: false,
				switchOpen: true,
				list: [],
				form: {},
				content: "确定删除区间吗"
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				this.$request("/appShopApi/order/queryPriceDownList", "get").then(res => {
					this.switchOpen = res.data.rate_open === 1;
					this.list = res.data.list;
				})
			},
			//提交事件
			submitForm() {
				console.log("this.form", this.form)
				if(Number(this.form.endAmount) <= Number(this.form.beginAmount)) {
					uni.showToast({
						title:"请输入正确的区间范围",
						icon: "none"
					})
					return
				}
				if(!this.form.rate) {
					uni.showToast({
						title:"压价比例不能为空",
						icon: "none"
					})
					return
				}
				this.$request("/appShopApi/order/createOrUpdatePriceDown","post", this.form).then(res => {
					console.log("操作成功", res);
					uni.showToast({
						title: "操作成功!",
						icon:"success"
					})
					this.getList();
					this.popoupClose();
				})
			},
			//开关事件
			handleChange() {
				const data = {
					isOpen: this.switchOpen ? 1:0
				}
				this.$request("/appShopApi/order/updateRateOpen","get", data).then(res => {
					this.getList();
				})
			},
			modalConfirm() {
				console.log("删除")
				console.log("当前form:" , this.form)
				this.$request("/appShopApi/order/deletePriceDown", "get", {id: this.form.id}).then(res => {
					console.log(res)
					uni.showToast({
						title: "删除成功！",
						icon:"success"
					})
					this.modalClose();
					this.popoupClose();
					this.getList();
				})
				
			},
			modalClose() {
				this.modalShow = false;
			},
			handleDelete() {
				this.popShow = false;
				this.modalShow = true;
				this.content = "确定删除" + this.form.beginAmount + " - " + this.form.endAmount +" 区间吗？";
			},
			reset() {
				this.form = {
					beginAmount: 0,
					endAmount: 1000,
					rate: 20,
					upperLimitAmount: undefined
				}
			},
			handleUpdate(row) {
				this.form = row;
				this.popShow = true;
			},
			handleAdd() {
				this.reset();
				this.popShow = true;
			},
			popoupClose() {
				this.popShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.open-box {
		margin: 20rpx;
		padding: 20rpx;
		border-bottom: 1px solid #9a9998;
	}
	.table-box {
		margin: 20rpx;
		background-color: #fff;
		border: 1px solid #b4b3b1;
		border-radius: 10rpx;
		font-size: 28rpx;
		.line-box {
			border-bottom: 1px solid #b4b3b1;
		}
		.th-box {
			padding: 20rpx;
			text-align: center;
			border-right: 1px solid #b4b3b1;
			font-weight: 900;
		}
		.tr-box {
			padding: 20rpx;
			text-align: center;
			border-right: 1px solid #b4b3b1;
			font-size: 24rpx;
		}
	}
	.pop-head-box {
		padding: 20rpx;
		view {
			width: 40%;
		}
	}
	.form-box {
		padding: 20rpx;
	}
	.text-box {
		background-color: #ecf5ff;
		padding: 20rpx;
		margin: 20rpx;
		font-size: 26rpx;
		color: #2979ff;
		border-radius: 5rpx;
	}
	
</style>
